1 вересня 2025 р.Українська

Комплексний посібник з використання Frontend Performance API для збору та аналізу метрик завантаження сторінки з метою покращення продуктивності вебсайту для глобальної аудиторії.

Навігація у Frontend Performance API: досконалий збір метрик завантаження сторінки

У сучасному цифровому світі продуктивність вебсайту має першочергове значення. Повільне завантаження вебсайту може призвести до розчарування користувачів, покинутих кошиків і, зрештою, втрати доходу. Оптимізація продуктивності вашого фронтенду є критично важливою для забезпечення позитивного користувацького досвіду, незалежно від того, де знаходяться ваші користувачі по всьому світу. Frontend Performance API надає потужні інструменти для вимірювання та аналізу різних аспектів продуктивності завантаження сторінки. Цей комплексний посібник проведе вас через використання Navigation Timing API та інших пов'язаних інтерфейсів продуктивності для збору та розуміння ключових метрик завантаження сторінки, що дозволить вам виявляти вузькі місця та покращувати швидкість і чутливість вашого вебсайту для глобальної аудиторії.

Розуміння важливості метрик завантаження сторінки

Метрики завантаження сторінки надають цінну інформацію про те, наскільки швидко ваш вебсайт завантажується та стає інтерактивним для користувачів. Ці метрики є вирішальними з кількох причин:

Користувацький досвід: Швидше завантаження вебсайту забезпечує більш плавний та приємний користувацький досвід, що веде до підвищення залученості та задоволеності. Уявіть, що користувач у Токіо намагається отримати доступ до вашого сайту електронної комерції; повільне завантаження, ймовірно, призведе до того, що він відмовиться від покупки.
Ранжування в SEO: Пошукові системи, такі як Google, враховують швидкість сторінки як фактор ранжування. Оптимізація продуктивності вашого вебсайту може покращити вашу видимість у пошукових системах.
Коефіцієнти конверсії: Дослідження показали пряму кореляцію між часом завантаження сторінки та коефіцієнтами конверсії. Швидші сторінки часто призводять до вищих коефіцієнтів конверсії, особливо в регіонах з повільнішою швидкістю інтернету.
Мобільна оптимізація: Зі зростанням використання мобільних пристроїв оптимізація для мобільної продуктивності є важливою. Час завантаження сторінки може значно вплинути на мобільний користувацький досвід, особливо в районах з обмеженою пропускною здатністю. Наприклад, користувачі в Індії, які покладаються на 3G-з'єднання, оцінять швидко завантажуваний вебсайт більше, ніж користувачі з високошвидкісним оптоволоконним з'єднанням.
Глобальне охоплення: Продуктивність може значно відрізнятися залежно від географічного розташування користувача, умов мережі та можливостей пристрою. Моніторинг продуктивності з різних регіонів може допомогти визначити сфери, де потрібна оптимізація.

Представляємо Frontend Performance API

Frontend Performance API — це набір інтерфейсів JavaScript, які надають доступ до даних, пов'язаних з продуктивністю веб-сторінок. Цей API дозволяє розробникам вимірювати різні аспекти часу завантаження сторінки, завантаження ресурсів та інші характеристики продуктивності. Navigation Timing API, ключовий компонент Frontend Performance API, надає детальну інформацію про час різних етапів процесу завантаження сторінки.

Ключові компоненти Performance API:

Navigation Timing API: Надає інформацію про час різних етапів процесу завантаження сторінки, таких як DNS-пошук, TCP-з'єднання, час запиту та відповіді, а також обробка DOM.
Resource Timing API: Надає інформацію про час завантаження окремих ресурсів, завантажених сторінкою, таких як зображення, скрипти та таблиці стилів. Це неоціненно для розуміння того, які ресурси найбільше впливають на час завантаження, особливо при наданні різних розширень зображень залежно від пристрою та регіону (наприклад, надання зображень WebP для підтримуваних браузерів для кращого стиснення).
User Timing API: Дозволяє розробникам визначати власні метрики продуктивності та позначати певні точки в коді для вимірювання часу виконання.
Paint Timing API: Надає метрики, пов'язані з візуалізацією контенту на екрані, такі як Перше відтворення (FP) та Перше контентне відтворення (FCP).
Найбільше контентне відтворення (LCP): Повідомляє про час візуалізації найбільшого зображення або текстового блоку, видимого в межах області перегляду, відносно того, коли сторінка вперше почала завантажуватися. Це ключова метрика в Core Web Vitals від Google.
Затримка першого введення (FID): Вимірює час від моменту, коли користувач вперше взаємодіє зі сторінкою (наприклад, коли він натискає на посилання, торкається кнопки або використовує спеціальний елемент керування на JavaScript) до моменту, коли браузер фактично може почати обробку обробників подій у відповідь на цю взаємодію.
Сукупний зсув макета (CLS): Вимірює загальну суму всіх несподіваних зсувів макета, які відбуваються протягом усього життєвого циклу сторінки.

Збір метрик завантаження сторінки за допомогою Navigation Timing API

Navigation Timing API надає велику кількість інформації про процес завантаження сторінки. Щоб отримати доступ до цих даних, ви можете використовувати властивість performance.timing у JavaScript.

Приклад: Збір даних Navigation Timing

Ось приклад того, як зібрати дані Navigation Timing та вивести їх у консоль:


if (window.performance && window.performance.timing) {
  const timing = window.performance.timing;
  console.log('Navigation Start:', timing.navigationStart);
  console.log('Fetch Start:', timing.fetchStart);
  console.log('Domain Lookup Start:', timing.domainLookupStart);
  console.log('Domain Lookup End:', timing.domainLookupEnd);
  console.log('Connect Start:', timing.connectStart);
  console.log('Connect End:', timing.connectEnd);
  console.log('Request Start:', timing.requestStart);
  console.log('Response Start:', timing.responseStart);
  console.log('Response End:', timing.responseEnd);
  console.log('DOM Loading:', timing.domLoading);
  console.log('DOM Interactive:', timing.domInteractive);
  console.log('DOM Complete:', timing.domComplete);
  console.log('Load Event Start:', timing.loadEventStart);
  console.log('Load Event End:', timing.loadEventEnd);
}

Важливо: Об'єкт performance.timing є застарілим на користь інтерфейсу PerformanceNavigationTiming. Для сучасних браузерів рекомендується використовувати останній.

Використання PerformanceNavigationTiming


if (window.performance && window.performance.getEntriesByType) {
  const navigationEntries = performance.getEntriesByType('navigation');

  if (navigationEntries && navigationEntries.length > 0) {
    const navigationEntry = navigationEntries[0];

    console.log('Navigation Type:', navigationEntry.type); // наприклад, 'navigate', 'reload', 'back_forward'
    console.log('Navigation Start:', navigationEntry.startTime);
    console.log('Fetch Start:', navigationEntry.fetchStart);
    console.log('Domain Lookup Start:', navigationEntry.domainLookupStart);
    console.log('Domain Lookup End:', navigationEntry.domainLookupEnd);
    console.log('Connect Start:', navigationEntry.connectStart);
    console.log('Connect End:', navigationEntry.connectEnd);
    console.log('Request Start:', navigationEntry.requestStart);
    console.log('Response Start:', navigationEntry.responseStart);
    console.log('Response End:', navigationEntry.responseEnd);
    console.log('DOM Interactive:', navigationEntry.domInteractive);
    console.log('DOM Complete:', navigationEntry.domComplete);
    console.log('Load Event Start:', navigationEntry.loadEventStart);
    console.log('Load Event End:', navigationEntry.loadEventEnd);
    console.log('Duration:', navigationEntry.duration);


    // Розрахунок часу до першого байта (TTFB)
    const ttfb = navigationEntry.responseStart - navigationEntry.requestStart;
    console.log('TTFB:', ttfb);

    // Розрахунок часу завантаження DOM
    const domLoadTime = navigationEntry.domComplete - navigationEntry.domLoading;
    console.log('DOM Load Time:', domLoadTime);

    // Розрахунок часу завантаження сторінки
    const pageLoadTime = navigationEntry.loadEventEnd - navigationEntry.startTime;
    console.log('Page Load Time:', pageLoadTime);
  }
}

Розуміння метрик Navigation Timing

Ось розбір деяких ключових метрик, наданих Navigation Timing API:

navigationStart: Час, коли починається навігація до документа.
fetchStart: Час, коли браузер починає завантажувати документ.
domainLookupStart: Час, коли браузер починає DNS-пошук для домену документа.
domainLookupEnd: Час, коли браузер завершує DNS-пошук для домену документа.
connectStart: Час, коли браузер починає встановлювати з'єднання з сервером.
connectEnd: Час, коли браузер завершує встановлення з'єднання з сервером. Розгляньте вплив використання CDN у різних регіонах; добре налаштований CDN може значно скоротити час з'єднання для користувачів по всьому світу.
requestStart: Час, коли браузер починає надсилати запит на сервер.
responseStart: Час, коли браузер отримує перший байт відповіді від сервера. Це початкова точка для вимірювання часу до першого байта (TTFB).
responseEnd: Час, коли браузер отримує останній байт відповіді від сервера.
domLoading: Час, коли браузер починає розбір HTML-документа.
domInteractive: Час, коли браузер завершив розбір HTML-документа і DOM готовий. Користувач може взаємодіяти зі сторінкою, хоча деякі ресурси все ще можуть завантажуватися.
domComplete: Час, коли браузер завершив розбір HTML-документа і всі ресурси (зображення, скрипти тощо) закінчили завантажуватися.
loadEventStart: Час, коли починається подія load.
loadEventEnd: Час, коли подія load завершується. Це часто вважається моментом, коли сторінка повністю завантажена.
duration: Загальний час, витрачений на навігацію. Доступно з PerformanceNavigationTiming.

Аналіз метрик завантаження сторінки для оптимізації

Після того, як ви зібрали метрики завантаження сторінки, наступним кроком є їх аналіз для визначення областей для оптимізації. Ось кілька ключових стратегій:

1. Визначте вузькі місця

Вивчаючи дані Navigation Timing, ви можете точно визначити етапи процесу завантаження сторінки, які займають найбільше часу. Наприклад, якщо domainLookupEnd - domainLookupStart велике, це вказує на проблему з розв'язанням DNS. Якщо responseEnd - responseStart велике, це свідчить про повільний час відповіді сервера або великий розмір контенту.

Приклад: Уявіть ситуацію, коли connectEnd - connectStart значно вище для користувачів у Південній Америці порівняно з користувачами в Північній Америці. Це може вказувати на необхідність використання CDN з точками присутності (PoP) ближче до південноамериканських користувачів.

2. Оптимізуйте час відповіді сервера (TTFB)

Час до першого байта (TTFB) — це критична метрика, яка вимірює час, необхідний браузеру для отримання першого байта даних від сервера. Високий TTFB може значно вплинути на загальний час завантаження сторінки.

Стратегії для покращення TTFB:

Оптимізуйте серверний код: Покращуйте ефективність вашого серверного коду, щоб скоротити час, необхідний для генерації HTML-відповіді. Використовуйте інструменти профілювання для виявлення повільних запитів або неефективних алгоритмів.
Використовуйте мережу доставки контенту (CDN): CDN може кешувати контент вашого вебсайту та подавати його з серверів, розташованих ближче до ваших користувачів, зменшуючи затримку та покращуючи TTFB. Розгляньте CDN з надійними глобальними мережами для обслуговування користувачів у різних регіонах.
Увімкніть HTTP-кешування: Налаштуйте свій сервер для надсилання відповідних HTTP-заголовків кешування, щоб дозволити браузерам кешувати статичні ресурси. Це може значно зменшити кількість запитів до сервера та покращити TTFB для наступних завантажень сторінки. Ефективно використовуйте кешування браузера.
Оптимізуйте запити до бази даних: Повільні запити до бази даних можуть значно вплинути на TTFB. Оптимізуйте свої запити, використовуючи індекси, уникаючи повних сканувань таблиць та кешуючи часто використовувані дані.
Використовуйте швидший веб-хостинг: Якщо ваш поточний веб-хостинг повільний, розгляньте можливість переходу на швидший.

3. Оптимізуйте завантаження ресурсів

Resource Timing API надає детальну інформацію про час завантаження окремих ресурсів, таких як зображення, скрипти та таблиці стилів. Використовуйте ці дані для виявлення ресурсів, які довго завантажуються, та оптимізуйте їх.

Стратегії для оптимізації завантаження ресурсів:

Стискайте зображення: Використовуйте інструменти для оптимізації зображень, щоб стискати їх без втрати якості. Розгляньте можливість використання сучасних форматів зображень, таких як WebP, які пропонують краще стиснення, ніж JPEG та PNG. Надавайте різні розширення зображень залежно від пристрою та розміру екрана користувача, використовуючи елемент <picture> або техніки адаптивних зображень.
Мініфікуйте CSS та JavaScript: Видаліть непотрібні символи та пробіли з ваших файлів CSS та JavaScript, щоб зменшити їх розмір.
Об'єднуйте файли CSS та JavaScript: Об'єднайте кілька файлів CSS та JavaScript в меншу кількість файлів, щоб зменшити кількість HTTP-запитів. Використовуйте інструменти, такі як Webpack, Parcel або Rollup для об'єднання.
Відкладайте завантаження некритичних ресурсів: Завантажуйте некритичні ресурси (наприклад, зображення під згином) асинхронно, використовуючи такі техніки, як відкладене завантаження (lazy loading).
Використовуйте CDN для статичних ресурсів: Подавайте статичні ресурси (зображення, CSS, JavaScript) з CDN для покращення часу завантаження.
Пріоритезуйте критичні ресурси: Використовуйте <link rel="preload"> для пріоритезації завантаження критичних ресурсів, таких як CSS та шрифти, для покращення початкового рендерингу сторінки.

4. Оптимізуйте рендеринг

Оптимізуйте спосіб рендерингу вашого вебсайту, щоб покращити користувацький досвід. Ключові метрики включають Перше відтворення (FP), Перше контентне відтворення (FCP) та Найбільше контентне відтворення (LCP).

Стратегії для оптимізації рендерингу:

Оптимізуйте доставку CSS: Доставляйте CSS таким чином, щоб запобігти блокуванню рендерингу. Використовуйте техніки, такі як критичний CSS, для вбудовування CSS, необхідного для початкової області перегляду, та асинхронного завантаження решти CSS.
Уникайте довготривалого JavaScript: Розбивайте довготривалі завдання JavaScript на менші частини, щоб уникнути блокування основного потоку.
Використовуйте веб-воркери: Переносьте обчислювально інтенсивні завдання на веб-воркери, щоб уникнути блокування основного потоку.
Оптимізуйте виконання JavaScript: Використовуйте ефективний код JavaScript та уникайте непотрібних маніпуляцій з DOM. Бібліотеки віртуального DOM, такі як React, Vue та Angular, можуть допомогти оптимізувати оновлення DOM.
Зменшуйте зсуви макета: Мінімізуйте несподівані зсуви макета для покращення візуальної стабільності. Резервуйте місце для зображень та реклами, щоб запобігти стрибкам контенту під час завантаження сторінки. Використовуйте метрику Сукупного зсуву макета (CLS) для виявлення областей, де відбуваються зсуви макета.
Оптимізуйте шрифти: Ефективно використовуйте веб-шрифти, попередньо завантажуючи їх, використовуючи font-display: swap;, щоб уникнути невидимого тексту, та використовуючи підмножини шрифтів для зменшення розміру файлів шрифтів. Розгляньте можливість використання системних шрифтів, де це доречно.

5. Постійно моніторте продуктивність

Продуктивність вебсайту — це не одноразове виправлення. Важливо постійно моніторити продуктивність, щоб виявляти та усувати нові вузькі місця, коли вони виникають. Використовуйте інструменти моніторингу продуктивності для відстеження ключових метрик з часом та налаштовуйте сповіщення, які повідомлятимуть вас про погіршення продуктивності. Регулярно перевіряйте продуктивність вашого вебсайту за допомогою таких інструментів, як Google PageSpeed Insights, WebPageTest та Lighthouse. Розгляньте можливість впровадження Моніторингу реальних користувачів (RUM) для збору даних про продуктивність від реальних користувачів у різних місцях.

Використання User Timing API для власних метрик

User Timing API дозволяє визначати власні метрики продуктивності та вимірювати час виконання певних ділянок коду. Це може бути корисним для відстеження продуктивності власних компонентів або певних взаємодій користувачів.

Приклад: Вимірювання власної метрики


// Початок вимірювання
performance.mark('start-custom-metric');

// Виконання деякої операції
// ... ваш код тут ...

// Кінець вимірювання
performance.mark('end-custom-metric');

// Розрахунок тривалості
performance.measure('custom-metric', 'start-custom-metric', 'end-custom-metric');

// Отримання вимірювання
const measures = performance.getEntriesByType('measure');
if (measures && measures.length > 0) {
  const customMetric = measures[0];
  console.log('Custom Metric Duration:', customMetric.duration);
}

Моніторинг реальних користувачів (RUM) для глобальних інсайтів продуктивності

Хоча синтетичне тестування (наприклад, за допомогою Lighthouse) надає цінні інсайти, Моніторинг реальних користувачів (RUM) пропонує більш точну картину того, як ваш вебсайт працює для реальних користувачів у різних місцях та за різних умов мережі. RUM збирає дані про продуктивність безпосередньо з браузерів користувачів і надає інсайти щодо ключових метрик, таких як час завантаження сторінки, TTFB та частота помилок. Розгляньте можливість використання інструментів RUM, які дозволяють сегментувати дані за географією, пристроєм, браузером та типом мережі для виявлення проблем з продуктивністю, специфічних для певних сегментів користувачів.

Міркування щодо впровадження глобального RUM:

Конфіденційність даних: Забезпечте відповідність правилам конфіденційності даних, таким як GDPR та CCPA, при зборі даних користувачів. Анонімізуйте або псевдонімізуйте конфіденційні дані, де це можливо.
Вибірка: Розгляньте можливість використання вибірки для зменшення обсягу зібраних даних та мінімізації впливу на продуктивність користувачів.
Географічна сегментація: Сегментуйте ваші RUM-дані за географічним регіоном для виявлення проблем з продуктивністю, специфічних для певних місць.
Умови мережі: Відстежуйте продуктивність на різних типах мереж (наприклад, 3G, 4G, Wi-Fi), щоб зрозуміти, як умови мережі впливають на користувацький досвід.

Вибір правильних інструментів

Кілька інструментів можуть допомогти вам збирати та аналізувати метрики завантаження сторінки. Деякі популярні варіанти включають:

Google PageSpeed Insights: Безкоштовний інструмент, який аналізує продуктивність вашого вебсайту та надає рекомендації для покращення.
WebPageTest: Безкоштовний інструмент, який дозволяє тестувати продуктивність вашого вебсайту з різних місць та браузерів.
Lighthouse: Інструмент з відкритим кодом, який перевіряє продуктивність, доступність та SEO вашого вебсайту. Він інтегрований у Chrome DevTools.
New Relic: Комплексна платформа моніторингу, яка надає інсайти в реальному часі про продуктивність вашого вебсайту.
Datadog: Платформа моніторингу та аналітики, яка пропонує моніторинг реальних користувачів та можливості синтетичного тестування.
Sentry: Платформа для відстеження помилок та моніторингу продуктивності, яка допомагає виявляти та виправляти проблеми з продуктивністю.

Висновок

Оптимізація продуктивності фронтенду — це безперервний процес, який вимагає постійного моніторингу, аналізу та оптимізації. Використовуючи Frontend Performance API та інші інструменти, ви можете отримати цінні інсайти щодо продуктивності вашого вебсайту та визначити сфери для покращення. Не забувайте враховувати глобальний характер вашої аудиторії та оптимізувати для користувачів у різних місцях та з різними умовами мережі. Зосереджуючись на користувацькому досвіді та постійно моніторячи продуктивність, ви можете забезпечити, щоб ваш вебсайт надавав швидкий та чутливий досвід для всіх користувачів, незалежно від того, де вони знаходяться у світі. Впровадження цих стратегій допоможе вам створити швидший, більш привабливий та успішніший вебсайт для глобальної аудиторії.